<template>
  <div v-if="!initLoading">
    <el-dialog
      v-model="visible"
      title="重新发货的物流信息"
      @before-ok="createOk(createRef)"
      @close="close(createRef)"
      width="600px"
      top="100px"
    >
      <div style="width: 500px">
        <el-form
          :model="createForm"
          :rules="createRules"
          ref="createRef"
          label-width="120px"
          size="default"
        >
          <el-form-item label="物流公司：" prop="express_id">
            <el-select
              v-model="createForm.express_id"
              placeholder="选择物流公司"
              class="form-select-fil"
            >
              <el-option
                v-for="item in expressCompanyList"
                :key="item.id"
                :label="`${item.company_name}`"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号：" prop="express_no">
            <el-input
              v-model="createForm.express_no"
              placeholder="请输入物流单号"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="flex center">
          <el-button @click="visible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnLoading"
            @click="createOk(createRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    <script lang="ts">
export default {
  name: "storeOrderRefundDelivery",
};
</script>
  <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import type { FormInstance } from "element-plus";
import type { Result, ResultError } from "@/types";
import { getExpressCompanySelect } from "@/api/store/express_company";
import {
  getOrderRefundDetail,
  deliveryOrderRefund,
} from "@/api/store/order_refund";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const visible = ref<boolean>(false);

const operationId = ref<number>(0);

const createRef = ref<typeof FormInstance>();

const btnLoading = ref<boolean>(false);

const initLoading = ref<boolean>(true);

const createForm = ref<any>({
  express_id: null,
  express_no: "",
});

const createRules: any = reactive({
  express_id: [{ required: true, message: "请选择物流公司" }],
  express_no: [{ required: true, message: "请输入物流订单号" }],
});

const orderRefundDetail = ref<any>({});

const toInit = () => {
  initLoading.value = false;
};

const expressCompanyList = ref<any>([]);

const toInitExpressCompany = () => {
  getExpressCompanySelect()
    .then((res: Result) => {
      expressCompanyList.value = res.data;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    console.log(valid, fields);
    if (valid) {
      if (btnLoading.value) {
        return false;
      }
      btnLoading.value = true;
      deliveryOrderRefund({
        id: operationId.value,
        express_id: createForm.value.express_id,
        express_no: createForm.value.express_no,
      })
        .then((res: Result) => {
          $utils.successMsg(res);
          emit("success");
          close();
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          close();
        });
    }
  });
};

const open = (id: number = 0) => {
  initLoading.value = true;
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
    toInitExpressCompany();
  });
  visible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined = undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  btnLoading.value = false;
  visible.value = false;
};

defineExpose({ open });
</script>